<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <form th:id="form-data" th:action="@{/managerRole/add}" th:object="${role}" method="post">
                <div class="panel-body">
                    <div class="form-group clear">
                        <label class="col-sm-1 control-label search-label">角色</label>
                        <div class="col-sm-4 col-sm-inp">
                            <input type="text" class="form-control" th:field="*{role}" maxlength="120" onfocus="clearErrorMsg()" placeholder="请输入角色" />
                        </div>
                    </div>

                    <div class="form-group clear">
                        <label class="col-sm-1 control-label search-label">角色名称</label>
                        <div class="col-sm-4 col-sm-inp">
                            <input type="text" class="form-control" th:field="*{roleName}" maxlength="120" onfocus="clearErrorMsg()" placeholder="请输入角色名称" />
                        </div>
                    </div>

                    <div class="form-group clear">
                        <label class="col-sm-1 control-label search-label">描述</label>
                        <div class="col-sm-4 col-sm-inp">
                            <input type="text" class="form-control" th:field="*{description}" maxlength="120" onfocus="clearErrorMsg()" placeholder="请输入描述信息" />
                        </div>
                    </div>

                    <!-- 加载权限 -->
                    <div class="form-group clear">
                        <label class="col-sm-1 control-label search-label">权限</label>
                        <div class="col-sm-4 col-sm-inp">
                            <div id="treeView-checkbox"></div>
                        </div>
                        <input type="hidden" id="permissions" name="permissions"/>
                    </div>

                    <div class="clear errorMsg" id="errorMsg"></div>

                    <div class="panel-heading">
                        <div>
                            <button type="button" class="btn btn-sm btn-warning"
                                    th:onclick="'javascript:loadListData(\'' + @{/managerRole/list} + '\')'">返回</button>&emsp;
                            <button type="button" class="btn btn-sm btn-success" onclick="checkParams()">确定</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script th:src="@{/manager/js/role.js}"></script>
<script th:inline="javascript">
    $(function() {
        var checkArr = [];
        var defaultData = [];
        var url = basePath + "managerPermission/getPermission";
        $.post(url, function(data) {
            var data = eval('(' + data + ')');

            var permissions = data.data;
            for(var i = 0; i < permissions.length; i++) {
                var obj = {
                    text: permissions[i].name,
                    href: permissions[i].id,
                    tags: [i]
                };
                defaultData.push(obj);
            }

            var checkboxTree = $('#treeView-checkbox').treeview({
                data: defaultData,
                showIcon: false,
                showCheckbox: true,
                //showTags: true,
                //levels: 2,
                //enableLinks: true
                onNodeChecked: function(event, node) {
                    checkArr.push(node.href);
                    $("#permissions").val(checkArr.join());
                    clearErrorMsg();
                },
                onNodeUnchecked: function (event, node) {
                    checkArr.splice(node.tags, 1);
                    $("#permissions").val(checkArr.join());
                }
            });

            var findCheckboxNodess = function() {
                return checkboxTree.treeview('search', [ $('#input-check-node').val(), { ignoreCase: false, exactMatch: false } ]);
            };
            findCheckboxNodess();
        });
    });
</script>
</html>